<template>
  <div class="dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <el-card class="welcome-card">
        <div class="welcome-content">
          <div class="welcome-text">
            <h2>欢迎回来，{{ userInfo.name }}！</h2>
            <p>今天是个美好的一天，继续保持高效工作吧~</p>
          </div>
          <div class="welcome-image">
            <el-avatar :size="80" :src="userInfo.avatar">
              <el-icon size="40"><UserFilled /></el-icon>
            </el-avatar>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col v-for="stat in statsData" :key="stat.title" :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" :style="{ borderTop: `3px solid ${stat.color}` }">
            <div class="stat-content">
              <div class="stat-info">
                <h3>{{ stat.value }}</h3>
                <p>{{ stat.title }}</p>
              </div>
              <div class="stat-icon" :style="{ backgroundColor: stat.color + '20', color: stat.color }">
                <el-icon size="24">
                  <component :is="stat.icon" />
                </el-icon>
              </div>
            </div>
            <div class="stat-footer">
              <span :class="stat.trend === 'up' ? 'trend-up' : 'trend-down'">
                <el-icon>
                  <ArrowUp v-if="stat.trend === 'up'" />
                  <ArrowDown v-else />
                </el-icon>
                {{ stat.change }}
              </span>
              <span class="trend-text">{{ stat.period }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表和快捷操作 -->
    <div class="content-section">
      <el-row :gutter="20">
        <!-- 数据趋势图 -->
        <el-col :xs="24" :lg="16">
          <el-card title="访问趋势" class="chart-card">
            <div class="chart-container">
              <div class="chart-placeholder">
                <el-icon size="48" color="#ccc">
                  <TrendCharts />
                </el-icon>
                <p style="margin-top: 16px; color: #999">图表组件将在这里显示</p>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 快捷操作 -->
        <el-col :xs="24" :lg="8">
          <el-card title="快捷操作" class="action-card">
            <div class="action-grid">
              <div
                v-for="action in quickActions"
                :key="action.title"
                class="action-item"
                @click="handleAction(action.action)"
              >
                <div class="action-icon" :style="{ backgroundColor: action.color + '20', color: action.color }">
                  <el-icon size="20">
                    <component :is="action.icon" />
                  </el-icon>
                </div>
                <span>{{ action.title }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近活动 -->
    <div class="activity-section">
      <el-card title="最近活动">
        <el-timeline>
          <el-timeline-item
            v-for="activity in recentActivities"
            :key="activity.id"
            :timestamp="activity.time"
            :color="activity.color"
          >
            <div class="activity-content">
              <h4>{{ activity.title }}</h4>
              <p>{{ activity.description }}</p>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowUp, ArrowDown, UserFilled, TrendCharts } from '@element-plus/icons-vue'

const router = useRouter()

// 用户信息
const userInfo = ref({
  name: '管理员',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})

// 统计数据
const statsData = ref([
  {
    title: '总用户数',
    value: '1,234',
    change: '+12%',
    trend: 'up',
    period: '比上月',
    color: '#409EFF',
    icon: 'UserFilled'
  },
  {
    title: '今日访问',
    value: '5,678',
    change: '+8%',
    trend: 'up',
    period: '比昨日',
    color: '#67C23A',
    icon: 'View'
  },
  {
    title: '订单总数',
    value: '890',
    change: '-3%',
    trend: 'down',
    period: '比上月',
    color: '#E6A23C',
    icon: 'ShoppingCart'
  },
  {
    title: '销售额',
    value: '¥12,345',
    change: '+15%',
    trend: 'up',
    period: '比上月',
    color: '#F56C6C',
    icon: 'Money'
  }
])

// 快捷操作
const quickActions = ref([
  { title: '用户管理', icon: 'UserFilled', color: '#409EFF', action: 'users' },
  { title: '系统设置', icon: 'Setting', color: '#67C23A', action: 'settings' },
  { title: '数据报表', icon: 'TrendCharts', color: '#E6A23C', action: 'reports' },
  { title: '消息通知', icon: 'Bell', color: '#F56C6C', action: 'notifications' }
])

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    title: '用户张三注册成功',
    description: '新用户通过邮箱注册并完成验证',
    time: '2024-01-15 10:30',
    color: '#67C23A'
  },
  {
    id: 2,
    title: '系统更新完成',
    description: '系统版本更新至 v2.1.0，新增多项功能',
    time: '2024-01-15 09:15',
    color: '#409EFF'
  },
  {
    id: 3,
    title: '数据备份完成',
    description: '数据库自动备份任务执行成功',
    time: '2024-01-15 02:00',
    color: '#E6A23C'
  }
])

// 处理快捷操作点击
const handleAction = action => {
  switch (action) {
    case 'users':
      router.push('/system/user')
      break
    case 'settings':
      ElMessage.info('设置功能开发中...')
      break
    case 'reports':
      router.push('/tools/charts')
      break
    case 'notifications':
      ElMessage.info('消息功能开发中...')
      break
    default:
      ElMessage.info('功能开发中...')
  }
}
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.welcome-section {
  margin-bottom: 20px;
}

.welcome-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.welcome-card :deep(.el-card__body) {
  background: transparent;
  color: white;
}

.welcome-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.welcome-text h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.welcome-text p {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}

.stats-section {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-info h3 {
  margin: 0 0 4px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.stat-info p {
  margin: 0;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.trend-text {
  color: var(--el-text-color-placeholder);
}

.content-section {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.chart-container {
  height: 320px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.action-card {
  height: 400px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  height: 320px;
  align-content: start;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--el-border-color);
  cursor: pointer;
  transition: all 0.3s;
}

.action-item:hover {
  border-color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.activity-section {
  margin-bottom: 20px;
}

.activity-content h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: var(--el-text-color-primary);
}

.activity-content p {
  margin: 0;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

/* 响应式 */
@media (max-width: 768px) {
  .welcome-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .action-grid {
    grid-template-columns: 1fr;
  }
}
</style>
